<!DOCTYPE html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Core Flow Gallery</title>
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width" />
		<link href="styles/helper.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<ul class="core-flow">
			<li data-image="images/slide-1.jpg"></li>
			<li data-image="images/slide-2.jpg"></li>
			<li data-image="images/slide-3.jpg"></li>
			<li data-image="images/slide-4.jpg"></li>
			<li data-image="images/slide-5.jpg"></li>
		</ul>
		<script type="text/javascript" src="lib/jquery/jquery-1.9.0.min.js"></script>
		<script type="text/javascript" src="lib/jquery/jquery-ui-1.10.0.custom.min.js"></script>
		<script type="text/javascript" src="lib/core-1.0.5.js"></script>
		<script type="text/javascript" src="../trunk/jquery.flow.js"></script>
		<script type="text/javascript">
			$(function() /* On document ready */
			{
				var flow = $('ul.core-flow').flow(
				{
					distance: 50,
					easing:  'linear',
					defaultSize:
					{
						width: 100,
						height:100
					},
					timeout: 300,
					blockUI:
					{
						speed: 		300,
						opacity: 	.25,
						zIndex: 	9998,
						background: 'rgb(0,0,0)'
					},
					resize: 
					{
						speed: 400,
						optimize: 100
					},
					image: 
					{
						fade: 300,
						draggable: true
					}
				});
				
				flow.flow('play');
			})
		</script>
	</body>
</html>